<template>
    <div class="font">
        <el-header>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    字体素材库<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/home/material/background">背景素材库</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item :style="{'color': '#4065E0'}">
                        字体素材库
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/home/material/topic">主题素材库</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item >
                        <router-link to="/home/material/figure">驾舱形象素材库</router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
         <el-main>
            <div class="bg-main">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="中控" name="first" class="control">
                        <div class="top">
                            <div class="item">
                                <el-input v-model="keyWord" placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
                            </div>
                            <div class="item">
                                <span>状态:</span>
                                <el-select class="state" v-model="isActive" style="width: 100px;">
                                    <el-option label="启用" value="1"> </el-option>
                                    <el-option label="不启用" value="0"> </el-option>
                                </el-select>
                            </div>
                            <div class="item">
                                <el-button style="background: #4065E0; color: #fff; margin-right: 20px" @click="search(fontList)">查询</el-button>
                                <el-button style="background: #EEEEEE'; color: #333333" @click="reset">重置</el-button>
                            </div>
                        </div>
                        <div class="middle">
                            <div class="mid-left">
                                <div v-if="selected">
                                   <span @click="multiple">选择</span> 
                                </div>
                                <div v-else>
                                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    <el-link class="delete" type="danger" :underline="false" @click="delFont">删除</el-link>
                                </div>
                                
                            </div>
                            <el-button style="background: #4065E0; color: #fff"  @click="addFont">+ 添加字体</el-button>
                        </div>
                        <div>
                            <draggable v-model="filteList" class="content" :options = "{animation:500}" @update="datadragEnd">
                                <div class="item" v-for="(item) in filteList" :key="item.id">
                                    <div class="imgBox">
                                        <img src="./ziti1.png">
                                    </div>
                                    <span> {{ item.name }} </span>
                                    <p> 文字的美感与您不期而遇 </p>
                                    
                                    <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="isActiveChange"></el-checkbox>
                                    <!-- 数据要有isChecked字段 -->
                                    <el-button class="deactive" size="small" style="background: #4065E0; color: #fff">
                                        {{ item.isActive ? '已启用' : '启用' }}
                                    </el-button>
                                </div>
                            </draggable>
                        </div>
                        <!-- 添加字体的dialog -->
                        <el-dialog
                            title="添加中控字体"
                            :visible.sync="addFontdialog"
                            :modal-append-to-body="false"
                            width="30%"
                            >
                            <span>暂无内容</span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="addFontdialog = false">取 消</el-button>
                                <el-button type="primary" @click="addFontdialog = false">确 定</el-button>
                            </span>
                        </el-dialog>
                    </el-tab-pane>
                    <el-tab-pane label="仪表" name="second" class="control">
                        <font-meter></font-meter>
                    </el-tab-pane>
                    <el-tab-pane label="手机" name="third" class="control">
                        <keep-alive>
                            <font-mobile></font-mobile>
                        </keep-alive>
                        
                    </el-tab-pane>
                </el-tabs>
            </div>
            
        </el-main>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import FontMeter from './meter/FontMeter'
import FontMobile from './FontMobile/FontMobile'
import { getFontList, deleteFont } from 'api/backgroundController/backgroundController'
export default {
    name: 'Font',
    data() {
        return {
            activeName: 'first',
            keyWord: '',
            isActive: '1',
            showCheckbox: false,
            fontList: [
                { name: '黑体', fontFamily: 'SimHei', isChecked: false },
                { name: '宋体', fontFamily: 'SimSuncss', isChecked: false },
                { name: '楷体', fontFamily: 'KaiTi', isChecked: false },
                { name: '圆体', fontFamily: 'Yuanti SC', isChecked: false }
            ],
            item: {},
            filteList: [],
            checkAll: false,
            selected: true,
            addFontdialog: false
        }
    },
    components: {
        draggable,
        FontMeter,
        FontMobile
    },
    methods: {
        // 点击tab栏的回掉函数
        handleClick(tab, event) {
            console.log(tab, event)
        },
        
        
        // 查询
        search(dataSouce){
            if(dataSouce){
                var _keyword = this.keyWord
                var isActive = parseInt(this.isActive)
                this.filteList = dataSouce.filter(item => {
                    if(item.name.indexOf(_keyword) > -1 && item.isActive == isActive){
                        return item
                    }
                })
            }else{
                return
            }
           
        },
        // 重置
        reset(){
            this.keyWord = ''
            this.isActive = "1"
            this.filteList = this.fontList
        },
        // 多选
        multiple(){
            this.selected = false
            this.showCheckbox = !this.showCheckbox
            
        },
        // 选择框的状态改变时的change函数
        isActiveChange(value){
                var num = 0
                this.filteList.forEach((item,index,arr) => {
                  if(item.isChecked){
                      num++
                  }
                  if(num == arr.length){
                      this.checkAll = true
                  }else{
                      this.checkAll = false
                  }
                })
            
        },
        // 全选
        handleCheckAllChange(){
            this.filteList.forEach(item => {
                item.isChecked = this.checkAll
            })
        },
        // 删除,filteList
        delFont(){
            var fontIdArr = []
            if(this.filteList.length != 0){
                for(var i = this.filteList.length-1; i >= 0; i--){
                    if(this.filteList[i].isChecked){
                        fontIdArr.push(this.filteList[i].fontId)
                        this.filteList.splice(i,1);
                    }
                }
                
            }
            if(fontIdArr.length != 0){
                deleteFont(fontIdArr).then(res => {
                    console.log(res)
                    
                })
            }
            
            this.selected = true
            this.showCheckbox = !this.showCheckbox
        },
        // 获取添加字体表单的数据并添加到字体数组
        // getState(item){
        //     var newFont = item
            
        //     this.filteList.push(newFont)
            
        // },
        // 拖拽结束时的事件
        datadragEnd(evt){
            evt.preventDefault();
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
            console.log(this.filteList);
        },
        // 添加字体
        addFont(){
            this.addFontdialog = true
        },
        // 获取中控字体列表
        getList(){
            var params = {
                appId: 'nng0011',
                moduleId: 2
            }
            getFontList(params).then(res => {
                console.log(res)
                if(res.data != null){
                    this.fontList = res.data
                    this.filteList = this.fontList
                }
            })
            .catch(res => {
                this.$message.error(res.resultMsg)
            })
        }
       
    },
    created(){
        this.getList()
    },
    mounted(){
        // 防止火狐浏览器拖拽的时候以新标签页打开
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
}
</script>

<style lang="scss" scoped>
.font {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    .el-header{
        line-height: 60px;
        font-size: 25px;
        font-weight: 700;
        .el-dropdown {
            color: #333333;
            font-size: 16px;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
        .bg-main{
            width: 100%;
            height: 100%;
            
            .control{
                position: relative;
            }
            .top{
                display: flex;
                justify-content: space-between;
                .item{
                display: flex;
                line-height: 40px;
                    span{
                        white-space: nowrap;
                        padding-right: 10px;
                    }
                }
            }
            .middle{
                text-align: right;
                margin: 30px 0;
                line-height: 40px;
                .mid-left{
                    float: left;
                    span{
                        padding-right: 20px;
                        color: #666666;
                        cursor: pointer;
                        font-size: 14px;
                    }
                }
            }
            .content{
                
                box-sizing: border-box;
                .item{
                    position: relative;
                    height: 64px;
                    line-height: 64px;
                    padding-left: 50px;
                    box-sizing: border-box;
                    span{
                        display: inline-block;
                        width: 300px;
                        color: #333333;
                        font-size: 14px;
                    }
                    .imgBox{
                        display: inline-block;
                        width: 16px;
                        height: 100%;
                        box-sizing: border-box;
                        margin-right: 6px;
                    }
                    img{
                        display: inline-block;
                        margin-top: 22px;
                        height: 16px;
                        width: 16px;
                        // vertical-align: middle;
                    }
                    p{
                        display: inline-block;
                        height: 100%;
                        color: #333333;
                        font-size: 24px;
                        box-sizing: border-box;
                    }
                    .el-checkbox{
                        position: absolute;
                        top: 50%;
                        left: 6px;
                        width: 14px;
                        height: 14px;
                        background-color: pink;
                        transform: translateY(-50%);
                        line-height: 0;
                    }
                    .deactive{
                        position: absolute;
                        top: 50%;
                        right: 6px;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }
}
.el-dropdown-menu {
    padding: 0;
    top: 100px !important;
    left: 204px !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
    color: #4065E0;
}
</style>
